<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="form">
				<view class="box">
					<uni-forms-item label="头像" name="user_avatar">
						<view class="dis-input" @click="avatarUpload">
							<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							<view class="avatarBox">
								<image class="avatar" v-if="form.user_avatar" :src="form.user_avatar" mode="aspectFill"></image>
								<image class="avatar" v-else src="@/static/img/avatar.png" mode="aspectFill"></image>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="昵称" name="nick_name">
						<uni-easyinput type="text" v-model="form.nick_name" :clearable="false" placeholder="请输入昵称" />
					</uni-forms-item>
					<uni-forms-item label="真实姓名" name="true_name">
						<uni-easyinput type="text" v-model="form.true_name" :clearable="false" placeholder="请输入真实姓名" />
					</uni-forms-item>
					<uni-forms-item label="性别" name="user_sex">
						<picker @change="bindPickerChange" :value="form.user_sex" :range="sex" range-key="label">
							<view class="picker-input">
								{{ sexName }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
				</view>
				<view class="btns">
					<button class="btn" type="primary" @click="submit">保存修改</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import baseUrl from '@/utils/config';
import api from '@/api/api';
export default {
	data() {
		return {
			form: {
				user_avatar: '',
				nick_name: '',
				user_sex: 2,
				true_name: ''
			},
			sexName: '未知',
			sex: [
				{
					value: 0,
					label: '女'
				},
				{
					value: 1,
					label: '男'
				},
				{
					value: 2,
					label: '未知'
				}
			]
		};
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		bindPickerChange(e) {
			this.sexName = this.sex[e.detail.value].label;
			this.form.user_sex = this.sex[e.detail.value].value;
		},
		submit() {
			api.editUserInfo(this.form).then((res) => {
				if (res.data.is_success) {
					uni.showToast({
						title: '修改成功'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				} else {
					uni.showToast({
						title: '无内容修改',
						icon: 'none'
					});
				}
			});
		},
		avatarUpload() {
			const _this = this;
			uni.chooseMedia({
				count: 1,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				success(res) {
					uni.showLoading({
						title: '上传中...'
					});
					uni.uploadFile({
						url: baseUrl + '/?s=App.Common_File.Upload',
						filePath: res.tempFiles[0].tempFilePath,
						name: 'file',
						formData: {
							access_token: uni.getStorageSync('access_token')
						},
						success: (uploadFileRes) => {
							let data = JSON.parse(uploadFileRes.data);
							_this.form.user_avatar = data.data.url;
							uni.hideLoading();
						},
						fail: (res) => {
							uni.hideLoading();
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		getInfo() {
			api.getUserInfo({}).then((data) => {
				this.form.nick_name = data.data.profile.nick_name;
				this.form.true_name = data.data.profile.true_name;
				this.form.user_avatar = data.data.profile.user_avatar;
				this.form.user_sex = data.data.profile.user_sex;
				for (let i = 0; i < this.sex.length; i++) {
					if (this.form.user_sex == this.sex[i].value) {
						this.sexName = this.sex[i].label;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.formBox {
	.dis-input {
		display: flex;
		flex-direction: row-reverse;
	}
	.avatarBox {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
		overflow: hidden;
		.avatar {
			width: 70rpx;
			height: 70rpx;
		}
	}
}
</style>
